<template>
  <div>
    <a-card :bordered="false">
      <a-form
        :label-col="{ span: 3 }"
        :wrapper-col="{ span: 9 }"
        :form="form"
      >
        <a-form-item label="告警联系人">
          <a-input
            autocomplete="off"
            placeholder="请输入告警联系人"
            v-decorator.trim="[ 'userName', decoratorOptions.userName]"
          />
        </a-form-item>
        <a-form-item label="联系邮箱">
          <a-input
            autocomplete="off"
            placeholder="请输入联系邮箱"
            v-decorator.trim="[ 'email', decoratorOptions.email]"
          />
        </a-form-item>
      </a-form>

      <div style="margin: 35px 0 35px 7%; display: inline-block">
        <a-button
          type="primary"
          @click="handleOk"
        > 保存设置 </a-button>
      </div>
    </a-card>
  </div>
</template>

<script>
  import {
    GwListMixin
  } from '@/mixins/GwListMixin'
  import {
    gPostAction
  } from '@/api/manage'

  export default {
    name: 'Contacts',
    mixins: [GwListMixin],
    props: {
      modelType: {
        type: String,
        default: ''
      },
    },
    data() {
      return {
        confirmLoading: false,
        form: this.$form.createForm(this),
        linkmanId: '',
        // 校验
        decoratorOptions: {
          userName: {
            rules: [{
                required: true,
                message: '请输入告警联系人'
              },
              { validator: this.validators.noWhitespace(), },
              { validator: this.validators.noIllegalString() },
              { max: 10, message: "长度在 1 到 10 个字符", trigger: "blur" },
            ],
            validateFirst: true,
          },
          email: {
            rules: [{
              required: true,
              message: '请输入联系邮箱'
            },
            {
              type: 'email',
              message: '请输入正确的联系邮箱',
              trigger: 'blur'
            },
            { max: 26, message: "最大长度不能超过26个字符", trigger: "blur" }]
          },
        }
      }
    },
    created() {
      this.form = this.$form.createForm(this)
    },
    mounted() {
      this.loadList()
    },
    methods: {
      loadList() {
        if (this.modelType === 'f010104') {
          this.gQueryParam.title = "精确管控与供电制冷联动-基础资源细粒度感知-诊断告警-告警联系人设置";
        } else if (this.modelType === 'f010305') {
          this.gQueryParam.title = "精确管控与供电制冷联动-供电制冷最优模型-供电制冷设备告警管理-告警联系人设置";
        }
        gPostAction('/linkman/list1', this.gQueryParam).then((res) => {
          if (res.data && res.data.length > 0) {
            this.linkmanId = res.data[0].id
            this.form.setFieldsValue({
              userName: res.data[0].userName,
              email: res.data[0].email
            })
          } else {
            this.linkmanId = ''
            this.form.resetFields()
          }
        })
      },
      handleOk(e) {
        this.confirmLoading = true
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            let uri = ''
            const postData = {
              userName: values.userName,
              email: values.email,
              title: "精确管控与供电制冷联动-基础资源细粒度感知-诊断告警-告警联系人设置"
            }
            if (this.linkmanId) {
              uri = '/linkman/update1'
              postData.linkmanId = this.linkmanId
            } else {
              uri = '/linkman/create'
            }

            gPostAction(uri, postData)
              .then((res) => {
                if (res.success) {
                  this.$message.success('操作成功')
                  this.$emit('ok')
                }
              })
              .finally(() => {
                this.confirmLoading = false
              })
          }
        })
      },
      onChange(row) {
        // console.log(this.$refs.table)
      },
    },
  }
</script>
<style scoped>

</style>
